<!--  -->
<template>
  <div class="add-list">
    <HeaderTop title="添加订单"></HeaderTop>
    <div class="add-container">
      <div class="main">
        <el-form ref="form" class="form"  :model="form" label-width="80px" :label-position="labelPosition">
          <el-form-item 
          label="添加人编号(用户平台账号)："
          prop="addName"
          :rules="{ required: true, message: '请添加用户编号', trigger: 'blur' }">
            <el-input class="input" type="text" v-model.trim="form.addName"></el-input>
          </el-form-item>
          <el-form-item
            v-for="(domain, index) in form.domains"
            :label="'第'+(index+1)+'个商品编号及数量'"
            :key="domain.key"
            :prop="'domains.' + index + '.value'"
            :rules="{required: true, message: '商品编号不能为空', trigger: 'blur'}"
            style="width:200px;display:inline-block;margin-right:20px"
          >
            <el-input class="input" type="text" v-model.trim="domain.value" placeholder="请输入商品编号"></el-input>
            <el-input-number v-model="domain.num" style="width:200px;margin-top:10px;margin-bottom:10px" placeholder="请输入商品数量" controls-position="right" :min="1"></el-input-number>
            <el-button @click.prevent="removeDomain(domain)">删除</el-button>
          </el-form-item>
          <el-button @click="addDomain" type="primary">新增商品</el-button>
          <el-form-item label="收货人姓名：" prop="buyerName" :rules="{ required: true, message: '请输入收货人姓名', trigger: 'blur' }">
            <el-input class="input" v-model="form.buyerName"></el-input>
          </el-form-item>
          <el-form-item label="收货人电话：" prop="buyerPhone" :rules="{ required: true, message: '请输入收货人电话', trigger: 'blur' }">
            <el-input class="input" v-model="form.buyerPhone"></el-input>
          </el-form-item>
          <el-form-item label="*收货人地址：" prop="selectedOptions" class="input-address" :rules="{ required: false}">
            <!-- 此处添加省市县选择器 -->
            <el-cascader size="large" :options="options" v-model="selectedOptions"></el-cascader>
            <el-input class="input-lg" v-model="form.buyerAddress" placeholder="详细地址"></el-input>
          </el-form-item>
          <el-form-item label="运费：" prop="espressFee" :rules="{ required: true, message: '请输入运费', trigger: 'blur' }">
            <el-input-number v-model="form.espressFee"  placeholder="请输入商品数量" controls-position="right" :min="1"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitform('form')">确认添加</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
import { regionDataPlus } from 'element-china-area-data'
export default {
  data () {
    return {
      form: {
        addName: '',
        index: '',
        buyerName: '',
        buyerPhone: '',
        buyerAddress: '',
        espressFee:0,
        domains: [{value: '',num:''}],
      },
      rules:[{

      }],
      labelPosition:'top',
      options: regionDataPlus,
      selectedOptions: []
    };
  },

  components: {
    HeaderTop
  },

  computed: {},

  methods: {

    submitform (formName) {
      this.$refs[formName].validate(async (valid) =>{
        let ss=''
        this.form.domains.forEach((item)=>{
          console.log(item)
          ss+=item.value+'@'+item.num+','
        })
        console.log('最终效果',ss.substr(0,ss.length-1))
        if(this.selectedOptions.length==0 || this.form.buyerAddress==''){
          this.$message.warning('请输入详细地址')
          return
        }
        if(valid){
          const params = {
            s:ss.substr(0,ss.length-1),
            userNo: this.form.addName,
            consignee:this.form.buyerName,
            mobile:this.form.buyerPhone,
            area:this.selectedOptions,
            address:this.form.buyerAddress,
            espressFee:this.form.espressFee,
            token:sessionStorage.getItem("token"),
            managerInfoId:sessionStorage.getItem('userId')
          }
          console.log(params)
          const result = await this.API.reqAppendOrder(params)
          console.log(result)
          this.$message.success(result.retMsg)
          if (result.retCode == '000') {
            console.log('确认添加',result)
          }
        }
      })
    },
    removeDomain(item) {
      var index = this.form.domains.indexOf(item)
      if (index !== -1) {
        this.form.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.form.domains.push({
        value: '',
        num:'',
        key: Date.now()
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}

</script>
<style lang='stylus' scoped>
.add-list
  height 100%
  .add-container
      height 100%
      padding-top 20px
      display flex
      justify-content center
      .main
        background #fff
        width 1521px
        height 85%
        border-top-left-radius 15px
        border-top-right-radius 15px
        padding-left 80px
        padding-top 50px
        overflow-y scroll
        .form
          .input
            width 200px
          .inline-item
            display inline-block
            margin-right 20px
            .input-mini
              width 88px
          .input-address
            .input-lg
              display block
              margin-top 10px
              width 500px
</style>